import * as Svg from 'react-native-svg';

import Example from './Example';

const { Defs, Circle, ClipPath, Rect, Text } = Svg;

function ImageExample() {
  return (
    <Svg.Svg height="100" width="100">
      <Defs>
        <ClipPath id="clip">
          <Circle cx="50%" cy="50%" r="40%" />
        </ClipPath>
      </Defs>
      <Rect x="0" y="0" width="100%" height="100%" fill="red" />
      <Rect x="5%" y="5%" width="50%" height="90%" />
      {/*
        // @ts-ignore */}
      <Svg.Image
        x="5%"
        y="5%"
        width="50%"
        height="90%"
        preserveAspectRatio="xMidYMid slice"
        opacity="0.5"
        href={require('./image.jpg')}
        clipPath="url(#clip)"
      />
      <Text x="50" y="50" textAnchor="middle" fontWeight="bold" fontSize="16" fill="blue">
        HOGWARTS
      </Text>
    </Svg.Svg>
  );
}

ImageExample.title = 'Draw Image with preserveAspectRatio prop';

function ClipImage() {
  return (
    <Svg.Svg height="100" width="100">
      <Defs>
        <ClipPath id="clip">
          <Circle cx="50%" cy="50%" r="40%" />
        </ClipPath>
      </Defs>
      {/*
        // @ts-ignore */}
      <Svg.Image
        onPress={() => alert('press on Image')}
        x="5%"
        y="5%"
        width="90%"
        height="90%"
        href={require('./image.jpg')}
        opacity="0.6"
        clipPath="url(#clip)"
      />
      <Text x="50" y="50" textAnchor="middle" fontWeight="bold" fontSize="16" fill="red">
        HOGWARTS
      </Text>
    </Svg.Svg>
  );
}
ClipImage.title = 'Clip Image';

function DataURI() {
  return (
    <Svg.Svg height="100" width="100">
      <Svg.Image
        x="5%"
        y="5%"
        width="90%"
        height="90%"
        href={{
          uri: '',
        }}
        opacity="0.6"
      />
    </Svg.Svg>
  );
}
DataURI.title = 'Data URI';

const icon = (
  <Svg.Svg height="20" width="20">
    <Svg.Image x="5%" y="5%" width="90%" height="90%" href={require('./image.jpg')} />
  </Svg.Svg>
);

const Image: Example = {
  icon,
  samples: [ImageExample, ClipImage, DataURI],
};

export default Image;
